<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


</head>
<body>
<div id="app">

    <div class="line"></div>
    <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
        <el-menu-item index="1"><a href="http://localhost:8080/vue-demo/manager.html">管理用户</a></el-menu-item>
        <el-menu-item index="2" ><a href="http://localhost:8080/vue-demo/handleChange.html" target="_blank">处理申请权限</a></el-menu-item>
        <el-menu-item index="3"><a href="http://localhost:8080/vue-demo/manageUserPrice.html" target="_blank">审核积分充值订单</a></el-menu-item>
        <el-menu-item index="4" @click="dialogVisible4 = true">增加商品分类</el-menu-item>
        <el-menu-item index="5" @click="dialogVisible5 = true">统计签到人数</el-menu-item>
        <el-menu-item index="8" @click="dialogVisible11 = true">退出登录</el-menu-item>
    </el-menu>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="退出登录"
            :visible.sync="dialogVisible11"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="user" label-width="80px">
            <el-form-item>
                <el-button type="primary" @click="cancelLogin">确认要退出登录吗</el-button>
                <el-button @click="dialogVisible11 = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <!--表格-->
    <template>
        <el-table
                :data="users"
                style="width: 100%"
                >
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    prop="userID"
                    label="用户ID"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="userNickName"
                    label="用户昵称"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="用户真实姓名"
                    align="center">
            </el-table-column>
            <el-table-column
                    prop="money"
                    align="center"
                    label="用户余额">
            </el-table-column>
            <el-table-column
                    prop="type"
                    align="center"
                    label="用户类型">
            </el-table-column>
            <el-table-column
                    prop="userDo"
                    align="center"
                    label="主营业务">
            </el-table-column>
            <el-table-column
                    prop="userPhone"
                    align="center"
                    label="用户电话号码">
            </el-table-column>
            <el-table-column
                    prop="userAccount"
                    align="center"
                    label="用户账号">
            </el-table-column>
            <el-table-column
                    prop="shopName"
                    align="center"
                    label="店铺名称">
            </el-table-column>
            <el-table-column
                    align="center"
                    label="操作">

                <template slot-scope="scope">
                    <!-- 在这里，你可以使用scope.$index来获取当前行的索引值 -->
                    <el-button type="primary" @click="modifyUser(scope.row)">修改信息</el-button>
                    <el-button type="danger" @click="cancelAccount(scope.row)">封号</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="新增分类"
            :visible.sync="dialogVisible4"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="good_type" label-width="80px" >
            <template >
                <el-table
                        :data="goods_type"
                        style="width: 100%"

                        :row-class-name="tableRowClassName">
                    <el-table-column
                            type="index"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="商品种类"
                            align="center">
                    </el-table-column>
                </el-table>
            </template>
            <el-form-item>
                <el-button type="primary" @click="dialogVisible3 = true">新增</el-button>
                <el-button @click="dialogVisible4 = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="新增商品分类"
            :visible.sync="dialogVisible3"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="good_type" label-width="80px">
            <el-form-item label="分类" prop="type">
                <el-input v-model="good_type.type" :maxlength="6"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addGoodsType">确认新增</el-button>
                <el-button @click="dialogVisible3 = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="统计签到人数"
            :visible.sync="dialogVisible5"
            width="100%">

        <template>
            <el-table
                    :data="signUsers"
                    style="width: 100%"
                                >
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="userID"
                        label="用户ID"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="用户昵称"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="用户签到时间"
                        align="center">
                </el-table-column>

            </el-table>
        </template>

    </el-dialog>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="修改个人信息"
            :visible.sync="dialogVisible"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="user" label-width="80px">
            <el-form-item label="账号">
                <el-input v-model="user.userAccount" readonly></el-input>
            </el-form-item>
            <el-form-item label="真实姓名" prop="userName" >
                <el-input v-model="user.userName" :maxlength="12" readonly></el-input>
            </el-form-item>
            <el-form-item label="昵称" prop="userNickName">
                <el-input v-model="user.userNickName" :maxlength="6"></el-input>
            </el-form-item>
            <el-form-item label="店铺名称" prop="shopName">
                <el-input v-model="user.shopName" :maxlength="9"></el-input>
            </el-form-item>
            <el-form-item label="用户手机号" prop="userPhone">
                <el-input v-model="user.userPhone" :maxlength="11" readonly></el-input>
            </el-form-item>
            <el-form-item label="用户主营业务" prop="userDo">
                <el-input type="textarea" v-model="user.userDo" :maxlength="30"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="modifyUser2">确认修改</el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--添加数据的对话框表单-->
    <el-dialog
            title="警告"
            :visible.sync="dialogVisible2"
            width="30%">

        <el-form status-icon :rules="rules" ref="form" :model="user" label-width="80px">
            <el-form-item>
                <el-button type="primary" @click="cancelAccount2">确认永久封号吗</el-button>
                <el-button @click="dialogVisible2 = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el:"#app",

        mounted(){
            //当页面加载完成之后，发布异步请求获取数据

            var _this = this;
            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/showAllUsers"
            }).then(function (resp) {
                _this.users = resp.data;
            })

            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/showAllGoodsType"
            }).then(function (resp) {
                _this.goods_type = resp.data;
            })

            axios({
                method:"get",
                url:"http://localhost:8080/vue-demo/showSignNum"
            }).then(function (resp) {
                _this.signUsers = resp.data;
            })
        },

        methods: {

            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            handleClick() {
                // 点击菜单项时的逻辑
                this.dialogVisible = true;
                this.dialogVisibleTwo = true;
            },
            modifyUser(user){
                //console.log(user);
                this.user = user;
                //console.log(this.user)
                this.dialogVisible = true
            },
            modifyUser2(){
                //console.log(this.user);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/modifyUser2",
                    data:_this.user
                }).then(function (resp) {

                    if(resp.data === "success"){
                        //注册成功
                        console.log(_this.user);
                        alert("修改信息成功")
                        _this.dialogVisible =  false
                    }
                    else if(resp.data === "error"){
                        //输入不正确
                        alert("输入不正确")
                    }
                    else if(resp.data === "errorNickName"){
                        //输入不正确
                        alert("昵称重复")
                    }
                    else if(resp.data === "errorShopName"){
                        //输入不正确
                        alert("小店名称重复")
                    }
                    else if(resp.data === "errorShopName2"){
                        //输入不正确
                        alert("小店名称不能少于3个字")
                    }
                    else if(resp.data === "errorName"){
                        //输入不正确
                        alert("昵称不能少于3个字")
                    }
                })

            },
            cancelAccount(user){
                //console.log(user);
                this.user = user;
                //console.log(this.user)
                this.dialogVisible2 = true
            },
            cancelAccount2(){
                //console.log(this.user);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/cancelAccount",
                    data:_this.user
                }).then(function (resp) {

                    if(resp.data === "success"){
                        //console.log(_this.user);
                        alert("永久封号成功")
                        _this.dialogVisible2 =  false
                    }
                    if(resp.data === "error"){
                        //console.log(_this.user);
                        alert("已经是封号状态")
                        _this.dialogVisible2 =  false
                    }
                })

            },
            cancelLogin(){
                //this.goods = this.tableData[index];
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/cancelLogin",
                }).then(function (resp) {
                    if (resp.data === "success") {
                        alert("您已经退出登录")
                        window.location.href = "http://localhost:8080/vue-demo/hello.html";
                    }
                })
            },
            addGoodsType(){
                //console.log(this.user);
                var _this = this;
                //发送请求
                axios({
                    method : "post",
                    url:"http://localhost:8080/vue-demo/addGoodsType",
                    data:_this.good_type
                }).then(function (resp) {

                    if(resp.data === "success"){
                        //console.log(_this.user);
                        alert("新增分类成功")
                        _this.dialogVisible3 =  false
                        _this.dialogVisible4 =  false
                    }
                })

            },
        },
        data() {
            var validateMessage = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新增分类信息'));
                } else {
                    if(/\s/.test(value)){
                        //如果存在空格
                        return callback(new Error('分类不可以有空格'));
                    }
                    else {
                        callback();
                    }
                    //callback();
                }
            }
            var validateName = (rule, value, callback) => {
                if (value.length < 3) {
                    return callback(new Error('昵称不能少于3个字'));
                }
                else if(/\s/.test(value)){
                    //如果存在空格
                    return callback(new Error('昵称不可以有空格'));
                }
                else {
                    callback();
                }
            };
            var validateShopName = (rule, value, callback) => {
                if (value.length < 3) {
                    return callback(new Error('小店名称不能少于3个字'));
                }
                else if(/\s/.test(value)){
                    //如果存在空格
                    return callback(new Error('昵称不可以有空格'));
                }
                else {
                    callback();
                }
            };

            return{


                user: {
                    userID:'',
                    userNickName: '',
                    userPhone:'',
                    userAccount:'',
                    userDo:'',
                    userName:'',
                    money:'',
                    shopName:'',
                    type:'',
                },
                users: [{
                    userID:'',
                    userNickName: '',
                    userPhone:'',
                    userAccount:'',
                    userDo:'',
                    userName:'',
                    money:'',
                    shopName:'',
                    type:'',
                }],
                signUsers:[{
                    userName:'',
                    num:'',
                    signID:'',
                    userID:'',
                    date:'',
                    time:'',
                }],
                goods_type: [{
                    type:'',
                    goods_id:''
                }],
                good_type: {
                    type:'',
                    goods_id:''
                },
                rules: {
                    userNickName: [
                        { validator: validateName, trigger: 'blur' }
                    ],
                    shopName: [
                        { validator: validateShopName, trigger: 'blur' }
                    ],
                    type: [
                        { validator: validateMessage, trigger: 'blur' }
                    ],
                },
                activeIndex2: '1',
                dialogVisible: false,
                dialogVisible2: false,
                dialogVisible3: false,
                dialogVisible4: false,
                dialogVisible5: false,
                dialogVisibleTwo: false,
                dialogVisible10: false,
                dialogVisible11: false,
            }
        }
    })
</script>

</body>
</html>